<div class="alert-observable-list">

    <div ng-include="'views/components/alert/observables/toolbar.html'"></div>

    <div class="mt-xs filter-panel" ng-include="'views/components/alert/observables/filters.html'"
        ng-show="$cmp.filtering.context.showFilters"></div>

    <div class="row mt-xs">
        <div class="col-md-12 clearfix">

            <filters-preview filters="$cmp.filtering.context.filters" on-clear-item="$cmp.removeFilter(field)"
                on-clear-all="$cmp.clearFilters()"></filters-preview>
        </div>
    </div>

    <div class="row">

        <div class="col-md-12" ng-show="$cmp.list.total === 0 && $cmp.list.values.length === 0">
            <div class="empty-message">No records</div>
        </div>

        <div class="col-md-12" ng-show="!$cmp.list.loading && $cmp.list.values.length !== 0">
            <psearch control="$cmp.list"></psearch>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th style="width:50px;">Flags</th>
                        <th style="width:100px;">Type</th>
                        <th>Data</th>
                        <th style="width: 120px">Date Added</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="observable in $cmp.list.values">
                        <td class="nowrap">
                            <observable-flags observable="observable" inline="true"
                                on-filter="$cmp.addFilterValue(fieldName, value)"></observable-flags>
                        </td>
                        <td>
                            <a href
                                ng-click="$cmp.addFilterValue('dataType', observable.dataType)">{{observable.dataType}}</a>
                        </td>
                        <td class="wrap">
                            <div class="wrap" ng-if="observable.dataType !== 'file'"
                                uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
                                {{observable.data | fang | ellipsis:250}}
                            </div>
                            <div class="wrap" ng-if="observable.dataType === 'file' && observable.attachment"
                                uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
                                {{observable.attachment.name}} ({{observable.attachment.size}} bytes)
                            </div>
                            <div class="wrap" ng-if="observable.dataType === 'file' && observable.remoteAttachment"
                                uib-tooltip="{{observable.message}}" tooltip-placement="top-left">
                                {{observable.remoteAttachment.filename}}
                            </div>
                            <div class="case-tags flexwrap mt-xxs" ng-if="observable.tags.length > 0">
                                <strong><i class="fa fa-tags mr-xxxs"></i></strong>
                                <tag-item ng-repeat="tag in observable.tags track by $index"
                                    ng-click="$cmp.addFilterValue('tags', tag)" value="tag"></tag-item>
                            </div>
                        </td>
                        <td>
                            <a href
                                ng-click="$cmp.addFilterValue('_createdAt', observable._createdAt)">{{observable._createdAt
                                | shortDate}}</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <psearch control="$cmp.list"></psearch>
        </div>
    </div>
</div>
